import React, {useEffect} from 'react';
import Images from '../images/images';
import screen from '../utils/screen';
import {ImageBackground, StyleSheet} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements';
import {useToast} from './toast/useToast';
import {useLoading} from './loading/useLoading';


const Container = (props)=>{

    const headerHeight = useHeaderHeight()
    const toast = useToast()
    const loading = useLoading()
    useEffect(()=>{

        return ()=>{
            toast.hide()
            loading.hide()
        }
    },[])


    return (
        <ImageBackground
            source={Images.home_bg}
            imageStyle={{width:screen.width,height:screen.height+100}}
            style={[styles.container,{paddingTop:headerHeight},props.style ]}>
            {props.children}
        </ImageBackground>
    )
}

export default Container

const styles = StyleSheet.create({
    container:{
        flex: 1
    }
})
